<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html lang="en">
<head>
	<title>角色管理</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	
	<link rel="icon" href="favicon.ico" type="image/x-icon" />
	<!-- END META SECTION -->
	
	<!-- CSS INCLUDE -->        
	      
	<link rel="stylesheet" href="${ctx}/rs/js/zTree/css/zTreeStyle/metro.css"/>
	<link rel="stylesheet" href="${ctx}/rs/css/bootstrap-table.css" />
	<link rel="stylesheet" href="${ctx}/rs/css/main.css" />
	<link id="theme" rel="stylesheet" href="${ctx}/rs/joli/css/theme-default.css" />
	
	<!-- EOF CSS INCLUDE -->        
</head>
<body>
	<!-- START PAGE CONTAINER -->
      <div class="page-container">
      	<!-- 引入左菜单部分 -->
          <jsp:include page="../joli/menu.jsp"></jsp:include>
          
          <!-- START PAGE CONTENT -->
          <div class="page-content">
              <jsp:include page="../joli/top.jsp"></jsp:include>
              
              <!-- START BREADCRUMB -->
              <ul class="breadcrumb">
                  <li><a href="#">系统管理</a></li>                    
                  <li class="active">角色管理</li>
              </ul>
              <!-- END BREADCRUMB -->   
              
              
              <!-- PAGE CONTENT WRAPPER -->
              <div class="page-content-wrap">
              	<div class="row">
           		<div class="col-xs-12">
           			<div id="toolbar">
						<shiro:hasPermission name="role:add">
							<button class="btn btn-info btn-sm srt-btn icon-adds" onclick="add()">新增</button>
						</shiro:hasPermission>
						<shiro:hasPermission name="role:edit">
							<button class="btn btn-success srt-btn btn-sm icon-editor" onclick="edit()">编辑</button>
						</shiro:hasPermission>
						<shiro:hasPermission name="role:delete">
							<button class="btn btn-danger srt-btn btn-sm icon-delt" onclick="removeData()">删除</button>
						</shiro:hasPermission>
						<shiro:hasPermission name="role:allot">
						    <button class="btn btn-success srt-btn btn-sm icon-perm" onclick="allot()">分配权限</button>
						</shiro:hasPermission>
					</div>
					<table id="table" cellpadding="0" cellspacing="0" data-toggle="table" data-toolbar="#toolbar"
						data-url="${ctx}/role/page.htm"
						data-cache="false"
						data-pagination="true" 
						data-side-pagination="server"
						data-page-list="[10, 20, 50, 100]"
						data-page-size="20"  
						data-query-params="queryParams">
						<thead>
							<tr class="tab-th">
								<th data-field="state" data-checkbox="true"></th>
								<th data-field="id" class="col-md-1">编号</th>
								<th data-field="name" class="col-md-3">角色名称</th>
								<th data-field="code" class="col-md-3">角色编码</th>
								<th data-field="weight" class="col-md-2">角色权重</th>
								<th data-field="allotCount" data-formatter="allotCountFormatter" class="col-md-3">角色权限</th>
							</tr>
						</thead>
					</table>
           		</div>
           	</div>
          	</div>
	</div>
	<!-- 引入所有joli的脚本 -->
	<jsp:include page="../joli/scripts.jsp"></jsp:include>
	<!-- 引入页面需要的脚本 -->
	<script type="text/javascript" src="${ctx}/rs/js/bootstrapQ.min.js"></script>
	<script src="${ctx}/rs/js/zTree/js/jquery.ztree.all-3.5.min.js"></script>
	<script src="${ctx}/rs/js/bootstrap-table.js"></script>
	<script src="${ctx}/rs/js/bootstrap-table-zh-CN.js"></script>
	<script src="${ctx}/rs/js/jquery.formatDate.js"></script>
	<script src="${ctx}/rs/js/my97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript" src="${ctx}/rs/js/session-out-error.js"></script>

	<script>
		activeMenu($("#menu_sys_2"));
        var $table = $('#table');
        
        $table.on('click-row.bs.table', function (e, row, $element) {
	    	$table.bootstrapTable('uncheckAll');
	    	$table.bootstrapTable('check', $element.index());
        });
        
        $table.bootstrapTable({
            height: getHeight()
        });
	    
        //获取分辨率高度
	    function getHeight() {
	        return window.screen.height - 308;
	    }
	    
	    $(window).resize(function () {
        	$table.bootstrapTable('resetView',{height: getHeight()});
        });
	    //初始化刷新
	    function refresh(){
			var pageSize = $table.bootstrapTable('getOptions').pageSize;
	    	$table.bootstrapTable('refresh', {
	    		silent: true,
	    		cache : false,
                url: '${ctx}/role/page.htm',
                query: {
    				pageIndex : 0,
    				pageSize : pageSize
    			}
            });
	    }
	    
	    function add() {
			bootstrapQ.dialog({
				url : '${ctx}/role/add.htm',
				title : '新增角色',
				width : '720px',
				close : 'true',
				hidebtn : 'true'
			},function(){
				//回调触发关闭窗口
				$("#bsmodal").modal("hide");
				refresh();
			});
		};
		
		function edit() {
			var rows = $table.bootstrapTable('getSelections');
			if (rows.length == 1) {
				bootstrapQ.dialog({
					url : "${ctx}/role/edit.htm?id="+ rows[0].id,
					title : "编辑角色",
					width : '720px',
					close : 'true',
					hidebtn : 'true'
				},function(){
					//回调触发关闭窗口
					$("#bsmodal").modal("hide");
					refresh();
				});
			}else{
				bootstrapQ.alert("请选中一条记录");
			}
        }
		
		function removeData() {
            var rows = $table.bootstrapTable('getSelections');
            if(rows.length > 0){
            	bootstrapQ.confirm('确定删除选中记录（非超级管理员请慎重操作）？',function(){
            		var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
                        return row.id;
                    });
                    $.ajax({
                        url: "${ctx}/role/delete.htm?ids="+ids,
                        success: function (text) {
                        	bootstrapQ.msg({
     						    msg  : '删除成功！',
     						    type : 'success',
     						    time : 2000
     						});
                        	refresh();//刷新
                        },
                        error: function () {
                        	bootstrapQ.msg({
     						    msg  : '删除失败！',
     						    type : 'danger',
     						    time : 2000
     						});
                        	refresh();
                        }
                    });
    			},null);
            }else{
            	bootstrapQ.alert("请选择要删除的记录！");
            }
        }
	    
	    function queryParams(params) {
			return {
				pageIndex : params.offset,
				pageSize : params.limit
			};
		}
	    
	    function allotCountFormatter(value, row, index) {
	        if (value && value > 0){
	        	return "<span class='label label-success'>已分配</span>";
	 		}else{
	 			return "<span class='label label-warning'>未分配</span>";
	 		}
	    }
	    
	    function allot() {
			var rows = $table.bootstrapTable('getSelections');
            if(rows.length == 1){
//             	var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
//                     return row.id;
//                 });
                //ids.join(",")
        		bootstrapQ.dialog({
    				url : '${ctx}/role/allot.htm?roleIds='+ rows[0].id,
    				title : '分配角色权限',
    				width : '600px',
    				close : 'true',
    				hidebtn : 'true'
    			},function(){
    				//回调触发关闭窗口
    				$("#bsmodal").modal("hide");
    				refresh();
    			});
            }else{
            	bootstrapQ.alert("请选择一个角色！");
            }
		};
	    
	</script>
</body>	
</html>